<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊呗</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background: #1a1a1a;
            overflow: hidden;
        }

        /* 心形样式 */
        .heart {
            position: absolute;
            width: 20px;
            height: 20px;
            background: #ff69b4;
            transform: rotate(45deg);
            animation: fall linear infinite;
            z-index: 1;
        }

        .heart:before,
        .heart:after {
            content: '';
            width: 20px;
            height: 20px;
            background: inherit;
            border-radius: 50%;
            position: absolute;
        }

        .heart:before {
            left: -10px;
        }

        .heart:after {
            top: -10px;
        }

        @keyframes fall {
            0% {
                transform: rotate(45deg) translateX(0) translateY(-100vh);
                opacity: 1;
            }
            100% {
                transform: rotate(45deg) translateX(100px) translateY(100vh);
                opacity: 0;
            }
        }

        /* 烟花样式 */
        .firework {
            position: absolute;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            animation: explode 1.2s ease-out forwards;
            box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.3);
            z-index: 1;
        }

        @keyframes explode {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            100% {
                transform: scale(40);
                opacity: 0;
            }
        }

        .particle {
            position: absolute;
            width: 3px;
            height: 3px;
            border-radius: 50%;
            animation: shoot 1.2s ease-out forwards;
            box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.3);
            z-index: 1;
        }

        @keyframes shoot {
            0% {
                transform: translateX(0) translateY(0);
                opacity: 1;
            }
            100% {
                transform: translateX(var(--tx)) translateY(var(--ty));
                opacity: 0;
            }
        }

        #authForm {
            background: rgba(255, 255, 255, 0.9);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            position: relative;
            z-index: 2;
            backdrop-filter: blur(10px);
            max-width: 400px;
            margin: 50px auto;
        }

        .form-group {
            margin-bottom: 15px;
        }

        input[type="text"], input[type="password"] {
            padding: 8px;
            margin: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: calc(100% - 26px);
        }

        input[type="submit"] {
            background: #007bff;
            color: white;
            border: none;
            cursor: pointer;
            width: 100%;
            padding: 8px;
            margin: 5px;
            border-radius: 4px;
        }

        input[type="submit"]:hover {
            background: #0056b3;
        }

        .switch-form {
            text-align: center;
            margin-top: 10px;
        }

        .switch-form a {
            color: #007bff;
            text-decoration: none;
            cursor: pointer;
        }

        .switch-form a:hover {
            text-decoration: underline;
        }

        .error-message {
            color: #dc3545;
            margin-top: 5px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="authForm">
            <h2>欢迎L O G I N</h2>
            <div class="form-group">
                <input type="text" id="loginUsername" placeholder="用户名" required>
            </div>
            <div class="form-group">
                <input type="password" id="loginPassword" placeholder="密码" required>
            </div>
            <div class="form-group">
                <input type="submit" value="现在登录" onclick="login()">
            </div>
            <div class="switch-form">
                你还没有账号？<a href="/register">原地注册</a>
            </div>
            <div id="loginError" class="error-message"></div>
        </div>
    </div>

    <script>
        // 音频播放控制
        let isAudioPlaying = false;  // 是否有音频正在播放
        let lastButtonClickTime = 0;
        const BUTTON_CLICK_INTERVAL = 1000; // 按钮点击的最小间隔为1秒

        // 音频播放函数
        function playAudio(audioFile) {
            if (isAudioPlaying) return;  // 如果有音频在播放，直接返回

            const audio = new Audio(`/static/audios/${audioFile}`);
            
            // 设置音频开始和结束的标志
            audio.addEventListener('play', () => {
                isAudioPlaying = true;
            });
            
            audio.addEventListener('ended', () => {
                isAudioPlaying = false;
            });

            audio.addEventListener('error', () => {
                isAudioPlaying = false;
                console.error('音频播放失败:', audioFile);
            });

            audio.play().catch(function(error) {
                isAudioPlaying = false;
                console.error('音频播放失败:', error);
            });

            return audio;  // 返回音频对象供后续使用
        }

        // 设置事件监听
        document.addEventListener('DOMContentLoaded', function() {
            // 用户名输入框事件
            const usernameInput = document.getElementById('loginUsername');
            usernameInput.addEventListener('focus', () => playAudio('user.wav'));
            usernameInput.addEventListener('mouseover', () => playAudio('user.wav'));

            // 密码输入框事件
            const passwordInput = document.getElementById('loginPassword');
            passwordInput.addEventListener('focus', () => playAudio('password.wav'));
            passwordInput.addEventListener('mouseover', () => playAudio('password.wav'));

            // 注册链接事件 - 只在点击时播放音频并等待
            const registerLink = document.querySelector('.switch-form a');
            registerLink.addEventListener('click', function(e) {
                e.preventDefault(); // 阻止默认跳转
                if (isAudioPlaying) return;  // 如果有音频在播放，直接返回
                
                const now = Date.now();
                if (now - lastButtonClickTime < BUTTON_CLICK_INTERVAL) {
                    return; // 如果间隔小于1秒，直接返回
                }
                lastButtonClickTime = now;

                const audio = playAudio('register.wav');
                if (!audio) return;  // 如果音频创建失败，直接返回
                
                // 音频播放完成后再跳转
                audio.addEventListener('ended', function() {
                    window.location.href = '/register';
                });
            });

            // 检查本地存储中的登录信息
            const savedUser = localStorage.getItem('chatUser');
            if (savedUser) {
                const userData = JSON.parse(savedUser);
                // 自动登录
                document.getElementById('loginUsername').value = userData.username;
                document.getElementById('loginPassword').value = userData.password;
                login();
            }
        });

        // 心形流星雨
        function createHeart() {
            const heart = document.createElement('div');
            heart.className = 'heart';
            
            heart.style.left = Math.random() * window.innerWidth + 'px';
            
            const size = Math.random() * 15 + 10;
            heart.style.width = size + 'px';
            heart.style.height = size + 'px';
            
            const duration = Math.random() * 2 + 2;
            heart.style.animationDuration = duration + 's';
            
            const colors = [
                '#ff69b4', // 热粉红
                '#ffb6c1', // 浅粉红
                '#ffc0cb', // 粉红
                '#ff1493', // 深粉红
                '#ff82ab'  // 亮粉红
            ];
            const color = colors[Math.floor(Math.random() * colors.length)];
            heart.style.background = color;
            
            document.body.appendChild(heart);
            
            setTimeout(() => {
                heart.remove();
            }, duration * 1000);
        }

        // 创建烟花
        function createFirework() {
            const firework = document.createElement('div');
            firework.className = 'firework';
            
            const x = Math.random() * window.innerWidth;
            const y = Math.random() * (window.innerHeight * 0.6);
            firework.style.left = x + 'px';
            firework.style.top = y + 'px';

            const colors = [
                '#FF3232', // 鲜红色
                '#FF4500', // 红橙色
                '#FFD700', // 金色
                '#FFFFFF', // 纯白色
                '#FFA500', // 橙色
                '#FF69B4'  // 粉红色
            ];
            const color = colors[Math.floor(Math.random() * colors.length)];
            firework.style.backgroundColor = color;

            document.body.appendChild(firework);

            // 创建烟花粒子
            for (let i = 0; i < 40; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.left = x + 'px';
                particle.style.top = y + 'px';
                particle.style.backgroundColor = color;

                const angle = (i / 40) * Math.PI * 2;
                const velocity = 150 + Math.random() * 100;
                particle.style.setProperty('--tx', Math.cos(angle) * velocity + 'px');
                particle.style.setProperty('--ty', Math.sin(angle) * velocity + 'px');

                document.body.appendChild(particle);

                setTimeout(() => {
                    particle.remove();
                }, 1200);
            }

            setTimeout(() => {
                firework.remove();
            }, 1200);
        }

        // 定时创建效果
        setInterval(createHeart, 150);    // 心形
        setInterval(createFirework, 1000); // 烟花

        async function login() {
            const username = document.getElementById('loginUsername').value;
            const password = document.getElementById('loginPassword').value;
            
            if (!username || !password) {
                document.getElementById('loginError').textContent = '请填写用户名和密码';
                return;
            }

            if (isAudioPlaying) return;  // 如果有音频在播放，直接返回

            const now = Date.now();
            if (now - lastButtonClickTime < BUTTON_CLICK_INTERVAL) {
                return; // 如果间隔小于1秒，直接返回
            }
            lastButtonClickTime = now;

            // 播放音频并等待完成
            const audio = new Audio('/static/audios/login.wav');
            try {
                // 设置音频开始和结束的标志
                audio.addEventListener('play', () => {
                    isAudioPlaying = true;
                });
                
                await new Promise((resolve, reject) => {
                    audio.addEventListener('ended', () => {
                        isAudioPlaying = false;
                        resolve();
                    });
                    audio.addEventListener('error', () => {
                        isAudioPlaying = false;
                        reject();
                    });
                    audio.play();
                });
            } catch (error) {
                isAudioPlaying = false;
                console.error('音频播放失败:', error);
                // 音频播放失败时继续执行登录
            }

            try {
                const response = await fetch('/api/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ username, password })
                });
                
                const data = await response.json();
                
                if (data.success) {
                    localStorage.setItem('chatUser', JSON.stringify({
                        username: username,
                        password: password,
                        avatar: data.avatar
                    }));
                    
                    if (data.is_admin) {
                        window.location.href = '/admin?token=123456';
                    } else {
                        window.location.href = '/rooms';
                    }
                } else {
                    document.getElementById('loginError').textContent = data.message;
                }
            } catch (error) {
                document.getElementById('loginError').textContent = '登录失败，请稍后重试';
                console.error('Login error:', error);
            }
        }
    </script>
</body>
</html> 